<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入 
* vue-iclient (https://github.com/SuperMap/vue-iclient)
* mapbox-gl-enhance (https://iclient.supermap.io/web/libs/mapbox-gl-js-enhance/1.12.1-12/mapbox-gl-enhance.js)
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title data-i18n='resources.title_componentsQuery_Vue'></title>
  <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
  <script include="iclient-mapboxgl-vue,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
  <style>
    #main {
      margin: 0 auto;
      width: 100%;
      height: 100%;
    }
    .mapboxgl-ctrl button:not(:disabled):hover {
        background-color: #269ff0;
    }
  </style>
</head>

<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  <div id="main">
    <sm-web-map server-url='https://iportal.supermap.io/iportal' map-id="801571284">
      <!-- 查询组件: sm-query -->
      <!-- 支持的数据：rest-map rest-data iportal-data-->
      <sm-query :rest-data="restData" :rest-map="restMap" :collapsed="false"></sm-query>
    </sm-web-map>
  </div>

  <script>
    new Vue({
      el: '#main',
      data() {
        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
        return {
          restData: [
            new SuperMap.Components.commontypes.RestDataParameter({
              url: host + "/iserver/services/data-world/rest/data",
              attributeFilter: "SmID>0",
              maxFeatures: 30,
              dataName: ["World:Countries"],
            })
          ],
          restMap: [
            new SuperMap.Components.commontypes.RestMapParameter({
              url: host + "/iserver/services/map-world/rest/maps/World",
              attributeFilter: "he",
              maxFeatures: 30,
              layerName: "Rivers@World",
              queryMode: 'KEYWORD'
            })
          ],
        }
      }
    })
  </script>
</body>

</html>
